<template>
  <div>
    <cube-form
      :model="model"
      :schema="schema"
      @submit="submitHandler"
    ></cube-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: {
        username: "",
        password: "",
      },
      schema: {
        fields: [
          {
            type: "input",
            modelKey: "username",
            label: "用户名",
            props: {
              placeholder: "请输入用户名",
            },
            rules: {
              required: true,
              min: 3,
              max: 15,
            },
            trigger: "blur",
            messages: {
              required: "用户名不能为空",
              min: "用户名不能少于3个字府",
              max: "用户名不能大于15个字符",
            },
          },
          {
            type: "input",
            modelKey: "password",
            label: "请输入密码",
            props: {
              placeholder: "请输入密码",
              type: "password",
              eye: {
                open: true,
                reverse: true,
              },
            },
            rules: {
              required: true,
              min: 3,
              max: 15,
            },
            trigger: "blur",
            messages: {
              required: "用户名不能为空",
              min: "用户名不能少于3个字府",
              max: "用户名不能大于15个字符",
            },
          },
          {
            type: "submit",
            label: "Submit",
          },
        ],
      },
    };
  },
  methods: {
    submitHandler(e) {
      e.preventDefault();

      //Axios is a promise-based HTTP Client、
      //get请求下,进行处理
      this.$http.getRequest("/api/register", {
          params: this.model
        })
        .then(function (response) {
          ''(response.message);
        })
        .catch(function (error) {
          ''(error);
        })
    },
  },
};
</script>

<style lang="stylus" scoped></style>